<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>店面群发给客户管理</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		#tip-msg{
			margin:20px 100px 0 100px;
		}
		form{
			width:80%;
			margin:auto;
		}
		#selectCustomer{
			height:200px;
			border: 1px solid #777b12;
			overflow: auto;
			display: block;
			background:#F7F5F5;
		}
		#msgContent{
			border: 1px solid #777b12;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#inputForm").validate({
				submitHandler: function(form){
					var customers = $("#customerIds").val();
					if (!customers){
						showTip("请选择接收信息的客户！");
						return;
					}
					var msg = $("#msgContent").val();
					msg = msg.replace(/[\r\n]/g,"").replace(/^\s*/g,"");
					if (!msg){
						showTip("请输入要发送的内容！");
						return;
					}
					$("#msgContent").val(msg);
					var submit = function(){
						sendMessage(form, 'sms', $("#sendType").val());
		            };
		    		loginPasswordPopup(submit);
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			$("#sendBtn").click(function(){
				$("#sendType").val("true");
			});
			$("#customerIds").change(function(){
				var sel = "";
				var all = true;
				var non = true;
				$("#customerIds").find("option").each(function(id,op){
					if (op.selected) {
						sel += op.text +"<br/>";
						non = false;
					}
					if(!op.selected){
						all = false;
					}
				 });
				$(":radio").attr("checked",false).checkboxradio("refresh");
				if (all){
					$("#all").attr("checked",true).checkboxradio("refresh");
				} else if (non){
					$("#non").attr("checked",true).checkboxradio("refresh");
				} else {
					$("#other").attr("checked",true).checkboxradio("refresh");
				}
				$("#selectCustomer").html(sel);
			});
			selectCustumer(1);
			$(":radio").click(function(){
				selectCustumer(this.value);
			});
		});
		function selectCustumer(isAll){
			if (isAll == "1"){
		     	var list='';
		     	$("#customerIds").find("option").each(function(id,op){
		     		op.selected=true;
		     		list += op.text +"<br/>";
			    }); 
				$(".ui-checkbox-off").removeClass("ui-checkbox-off").addClass("ui-checkbox-on");
	     		$("#selectCustomer").html(list);
			}
			if (isAll == "-1"){
				$("#customerIds").find("option").each(function(id,op){
		     		op.selected=false;
			    }); 
				$(".ui-checkbox-on").removeClass("ui-checkbox-on").addClass("ui-checkbox-off");
	     		$("#selectCustomer").html("");
			}
			$("#customerIds").selectmenu("refresh");
		}
	</script>
</head>
<body>
	<div data-role="navbar">
	    <ul>
	    	<li><a href="${ctx}/sms/sendStoreGroupToCustomer/select" class="ui-btn-active">选定客户</a></li>
	        <li><a href="${ctx}/sms/sendStoreGroupToCustomer/group">群客户</a></li>
	        <li><a href="${ctx}/sms/sendStoreGroupToCustomer/workEmployeeForm">客户分区</a></li>
	    </ul>
	</div>
	<div class="icon-buttons">
		<input type="button" class="leave-not-clean-session" data-inline="true" data-icon="back" data-iconpos="notext" value="返回"/>
	</div>
	<form:form id="inputForm" modelAttribute="smsStoreGroupToCustomer" action="${ctx}/sms/sendStoreGroupToCustomer/save" method="post" class="form-input">
		<tags:message content="${message}"/>
		<div class="middleCls">
			<input id="btnSubmit" type="submit" value="保存并发送" data-inline="true"/>
			<input id="sendBtn" type="submit" value="立即发送" data-inline="true"/>
		</div>
		<input type="hidden" id="target" name="target" value="select"/>
		<input type="hidden" id="sendType" name="sendType" value="false"/>
		<div id="tip-msg"><font color="red">提示:</font>短信默认发送的时间段为14:00~17:00之间立即发送，如果不在此时间段内，短信将被保存，在规定的时间段（14:00~17:00）自动发送。</div><br/>
   		<div data-role="fieldcontain">
			<label for="selectALL">是否全选：</label>
			<fieldset name="selectALL" id="selectALL"  data-role="controlgroup" data-type="horizontal" data-inline="true">
		        <input type="radio"  id="all" name="type" value="1" checked>
		        <label for="all">是</label>
		        <input type="radio"  id="non" name="type" value="-1">
		        <label for="non">否</label>
		        <input type="radio"  id="other" name="type" value="0">
		        <label for="other">自定义</label>
			</fieldset> 
		</div>
		<div data-role="fieldcontain">
			<label for="customerIds">客户选择:</label>
			<select id="customerIds" name="customerIds" data-native-menu="false"  multiple="multiple">
				<c:forEach items="${customers}" var="c">
					<option value="${c.id}" selected>${c.name}(${c.mobile})</option>
				</c:forEach>
			</select>
   		</div>
		<div data-role="fieldcontain">
			<label for="selectCustomer">已选客户:</label>
			<div id="selectCustomer">
			</div>
   		</div>
		<div data-role="fieldcontain">
			<label for="msgContent">内容:</label>
			<textarea id="msgContent" name="msgContent" cols="5" rows="10" maxlength="512"></textarea>
		</div>
	</form:form>
</body>
</html>
